<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/jpetstore.css" type="text/css">
</head>
<body>

<header th:fragment="header" class="header">
<!--    头部的logo-->
    <div>
        <a href="/catalog/viewMain"><img class="header-logo" width="20%" src="/images/mypetstore-log3.png"></a>
    </div>
<!--    头部的页面链接-->
    <div class="header-nav">
        <nav >
            <a href="/catalog/viewIndex" class="item">Main</a>
            <a href="/catalog/viewMain" class="item">Enter the Store </a>
            <a href="/Help.html" class="item" target="_blank">Know more about us </a>
            <a href="/Cooperation.html" class="item" target="_blank">Business Cooperation </a>
        </nav>
    </div>
<!--    头部的登录和注册信息-->
    <div class="header-user">
<!--       如果已经登录，显示退出登录 %>-->
<!--       否则显示登录或注册        %>-->

<!--        <c:if test="${empty sessionScope.account}">-->
            <div class="NoUser">
                <a href="/account/registerPage" class="register">Register </a>
                <a href="/account/loginPage" class="login">Login</a>
            </div>
<!--        </c:if>-->
<!--        <c:if test="${not empty sessionScope.account}">-->
<!--            <div class="User">-->
<!--                <a href="signout" class="register">Sign Out</a>-->
<!--                <a href="changeInfo" class="login">Account</a>-->
<!--                <a href="viewLog" class="login">My Log</a>-->
<!--            </div>-->
<!--        </c:if>-->
<!--        <div class="User">-->
<!--            <a href="signout" class="register">Sign Out</a>-->
<!--            <a href="" class="login">Account</a>-->
<!--            <a href="/account/viewMyLog" class="login">My Log</a>-->
<!--        </div>-->
    </div>
<!--    头部的菜单栏，用来跳转商品-->
    <div id="Menu">
        <div id="QuickLinks">
            <a href="viewCart">
                <img name="img_cart" src="/images/cart.gif" />
            </a>
            <img src="/images/separator.gif" />

            <a href="viewCategory?categoryId=FISH">
                <img src="/images/sm_fish.gif" />
            </a>
            <img src="/images/separator.gif" />

            <a href="viewCategory?categoryId=DOGS">
                <img src="/images/sm_dogs.gif" />
            </a>
            <img src="/images/separator.gif" />

            <a href="viewCategory?categoryId=REPTILES">
                <img src="/images/sm_reptiles.gif" />
            </a>
            <img src="/images/separator.gif" />

            <a href="viewCategory?categoryId=CATS">
                <img src="/images/sm_cats.gif" />
            </a>
            <img src="/images/separator.gif" />

            <a href="viewCategory?categoryId=BIRDS">
                <img src="/images/sm_birds.gif" />
            </a>
        </div>
    </div>

    <!--头部的搜索栏-->
    <div id="Search">
        <form action="search" method="post">
            <input type="text" name="keyword" size="14"  id="inputSearch" placeholder="Search you like"/>
            <input type="submit" name="searchProducts" value="Search" id="searchBtn"  style="border-radius: 30px" />
        </form>
    </div>
</header>

</body>
</html>